<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    <style>
        body {
            height: 100%;
            background-color: #39393b;
        }
    </style>
</head>
<body>
<!--
*************************************************************************
   Generated by HCODE at 2017-07-03 18:17:05
   From: https://code.hcharts.cn/demos/hhhhiL?hc-theme=dark-unica
*************************************************************************
 -->
<div style="margin-top: 15%">
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 100%"></div>
</div>
<script>
    var chart;
    $(function () {
        setInterval(function () {
            //定时器要执行的代码
            func()
        }, 30000);
        function func() {
            var data;
            $.ajax({
                url: "", context: document.body, async: false, success: function (getdata) {
                    data = getdata;
                }
            });
                        console.log(JSON.stringify(data));
            $('#container').highcharts({
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: '误差图'
                },
                xAxis: [{
                    {#                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']#}
                    categories: data[0]
                }],
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: '{value} °C',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: '温度',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    }
                }, { // Secondary yAxis
                    title: {
                        text: '降水',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    labels: {
                        format: '{value} mm',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    opposite: true
                }],
                tooltip: {
                    shared: true
                },
                series: [{
                    name: '降水',
                    type: 'column',
                    yAxis: 1,
                    {#                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],#}
                    data: data[1][0],
                    tooltip: {
                        pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
                    }
                }, {
                    name: '降雨误差',
                    type: 'errorbar',
                    yAxis: 1,
                    {#                data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]],#}
                    data: data[1][1],
                    tooltip: {
                        pointFormat: '(误差范围: {point.low}-{point.high} mm)<br/>'
                    }
                }, {
                    name: '温度',
                    type: 'spline',
                    {#                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],#}
                    data: data[1][2],
                    tooltip: {
                        pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
                    }
                }, {
                    name: '温度误差',
                    type: 'errorbar',
                    {#                data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],#}
                    data: data[1][3],
                    tooltip: {
                        pointFormat: '(误差范围: {point.low}-{point.high}°C)<br/>'
                    }
                }]
            });
        }

        func();
    });
</script>
</body>
</html>